<template>
    <div class="guess">
        <div class="title">
            猜你喜欢
        </div>
        <div class="goodsList">
            <div class="goods" v-for="item in data" :key="item.goods_id">
                <img :src="item.goods_thumb" alt="">
                <div class="info">
                    <span class="name">
                        <span class="teMai" v-if="item.is_promote == 1">特卖</span>
                        {{ item.goods_name }}
                    </span>
                    <div class="price">
                        <span class="newPrice">{{ item.shop_price_formated }}</span>
                        <span class="oldPrice" v-if="item.is_promote == 1">￥{{ item.market_price }}</span>
                    </div>
                </div>
            </div>
        </div>
        <LoadingSpinner v-if="isLoading"></LoadingSpinner>
        <div class="noMore" v-if="isNoMore">没有更多了</div>
    </div>
</template>

<script>
import { PostData } from '@/api';
import LoadingSpinner from './LoadingSpinner.vue';

export default {
    data() {
        return {
            data: null,
            page: 1,
            size: 10,
            isLoading: false,
            isNoMore: false,
        }
    },
    components: {
        LoadingSpinner
    },
    async created() {
        const jsonData = {
            page: this.page,
            size: this.size
        }
        this.isLoading = true
        this.data = await PostData('/goods/goodsguess', jsonData)
        this.isLoading = false
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll)
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll)
    },
    methods: {
        async handleScroll() {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            if (scrollTop < 500) {
                this.isLoading = false
            }
            const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
            const documentHeight = Math.max(
                document.body.scrollHeight,
                document.documentElement.scrollHeight
            )
            const threshold = 3; // 可根据需要调整阈值
            if (documentHeight - scrollTop - windowHeight <= threshold) {
                // console.log('到达页面底部')
                if (!this.isLoading) {
                    this.isLoading = true
                    this.page++
                    const jsonData = {
                        page: this.page,
                        size: this.size
                    }
                    const newData = await PostData('/goods/goodsguess', jsonData)
                    if (newData.length < this.size) {
                        window.removeEventListener('scroll', this.handleScroll)
                        this.data = this.data.concat(newData)
                        this.isLoading = false
                        this.isNoMore = true
                        return
                    }
                    this.data = this.data.concat(newData)
                    this.isLoading = false
                }
            }

        },

    }
}
</script>

<style scoped>
.guess {
    width: 100%;

    .title {
        width: 100%;
        text-align: center;
        font-size: 4.2667vw;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 2.6667vw 0 5.3333vw;
        gap: 2.1333vw;
    }

    .title::before {
        content: '';
        width: 13.3333vw;
        height: 1px;
        background-color: #ccc;
    }

    .title::after {
        content: '';
        width: 13.3333vw;
        height: 1px;
        background-color: #ccc;
    }

    .goodsList {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 1.3333vw;

        .goods {
            width: 45.8667vw;
            display: flex;
            flex-direction: column;
            border-radius: 1.3333vw;
            overflow: hidden;

            .info {
                width: 100%;
                height: 24vw;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 2.6667vw 1.3333vw;
                box-sizing: border-box;
                background-color: #fff;

                .name {
                    font-size: 3.7333vw;
                    height: 10.6667vw;
                    line-height: 5.3333vw;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;

                    .teMai {
                        font-size: 12px;
                        padding: .5333vw 1.6vw;
                        border-radius: 5.3333vw;
                        background-color: red;
                        color: #fff;
                    }
                }

                .price {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    gap: 2vw;
                    height: 8vw;
                    line-height: 8vw;

                    .newPrice {
                        font-size: 4.2667vw;
                        font-weight: bold;
                        color: red;
                    }

                    .oldPrice {
                        font-size: 3.2vw;
                        color: #999;
                        text-decoration: line-through;
                    }
                }
            }
        }
    }

    .noMore {
        line-height: 8vw;
        font-size: 4.2667vw;
    }
}
</style>